<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href="img/fav.png">
<!-- Author Meta -->
<meta name="author" content="CodePixar">
<!-- Meta Description -->
<meta name="description" content="">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Site Title -->
<title>学员信息</title>

<link href="https://fonts.googleapis.com/css?family=Poppins:100,300,500"
	rel="stylesheet">
<!--
		CSS
		============================================= -->
<link rel="stylesheet" href="../css/linearicons.css">
<link rel="stylesheet" href="../css/owl.carousel.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/nice-select.css">
<link rel="stylesheet" href="../css/magnific-popup.css">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../layui/laydate/laydate.css">
<script src="../js/vendor/jquery-2.2.4.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/vendor/bootstrap.min.js"></script>
<script src="../js/jquery.ajaxchimp.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="../js/jquery.nice-select.min.js"></script>
<script src="../js/jquery.magnific-popup.min.js"></script>
<script src="../js/main.js"></script>
<script src="../layui/layer/layer.js"></script>
<script src="../layui/layer/layui.js"></script>
<script src="../layui/laydate/laydate.js"></script>
<script src="/bootstrap/popper.12.5.min.js"></script>
<script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
<script src="/vue/Vue.js"></script>
<script src="/vue/axios.js"></script>

<script type="text/javascript">
	$(function(){
		$("#header").load("/zlz/header.html");
	})
</script>
</head>
<body class="bg-light">
	<div id="header" >
	</div>
	<!-- End Banner Area -->
	<div id="all" class="container-fluid">
		<!-- Start History Area -->
		<section class="section-gap history-area">
			<div class="container">
				<div class="history-tab-wrapper">
					<div class="row justify-content-between">
						<div class="col-lg-4">
							<div class="tab-thumb text-center">
								<img :src="student.avatar" class="img-fluid" alt="" style="width:400px;height:500px"> <br>
							</div>
						</div>
						<div class="col-lg-6 ml-auto">
							<div class="tab-total-content">
								<div class="nav ilene-tabs" id="myTab" role="tablist">
									<a class="nav-item active" id="nav-home-tab" data-toggle="tab"
										href="#nav-history" role="tab" aria-controls="nav-history"
										aria-selected="true"><span class="lnr lnr-map"></span>基本信息</a>
									<a class="nav-item" id="nav-profile-tab" data-toggle="tab"
										href="#nav-mission" role="tab" aria-controls="nav-mission"
										aria-selected="false"><span class="lnr lnr-bullhorn"></span>交易记录</a>
									<a class="nav-item" id="nav-contact-tab" data-toggle="tab"
										href="#nav-vission" role="tab" aria-controls="nav-vission"
										aria-selected="false"><span class="lnr lnr-sun"></span>给ta留言</a>
									<a v-if="role=='coach'" class="nav-item" id="nav-contact-tab" data-toggle="tab"
										href="#nav-invite" role="tab" aria-controls="nav-invite"
										aria-selected="false"><span class="lnr lnr-hand"></span>约ta上课</a>
								</div>
								<div class="tab-content mt-40" id="nav-tabContent">
									<div class="tab-pane fade show active" id="nav-history"
										role="tabpanel" aria-labelledby="nav-home-tab">
										<div class="single-content">
											<table class="table table-striped  table-hover  text-center">
												<tr>
													<th class="text-center"><b>昵称</b></th>
													<td id="nickname">{{student.nickname}}</td>
												</tr>

												<tr>
													<th class="text-center"><b>QQ号码</b></th>
													<td id="qq">{{student.qq}}</td>
												</tr>
												<tr>
													<th class="text-center"><b>微信号码</b></th>
													<td id="wechat">{{student.wechat}}</td>
												</tr>
												<tr>
													<th class="text-center"><b>手机号码</b></th>
													<td id="phone">{{student.phone}}</td>
												</tr>
												<tr>
													<th class="text-center"><b>个人简介</b></th>
													<td id="description">{{student.description}}</td>
												</tr>
												<tr>
													<th class="text-center"><b>{{focusStatus}}</b></th>
													<td v-if="focusStatus=='陌生人'" class="text-center">
													<a class="primary-btn white-bg d-inline-flex align-items-center"
															@click="focus"> <span class="mr-10">关注</span><span
															class="lnr lnr-arrow-right"></span>
														</a>
													</td>
												</tr>
											</table>

										</div>
									</div>
									<div class="tab-pane fade" id="nav-mission" role="tabpanel"
										aria-labelledby="nav-profile-tab">
										<div class="single-content">
											<table class="table table-striped  table-hover  text-center">
												<tr>
													<th class="text-center"><b>成交次数</b></th>
													<td class="text-center">{{successNum}}次</td>
												</tr>
												<tr>
													<th class="text-center"><b>未完成次数</b></th>
													<td class="text-center">{{failNum}}次</td>
												</tr>
												<tr>
													<th class="text-center"><b>好评次数</b></th>
													<td class="text-center">{{goodMark}}次</td>
												</tr>
												<tr>
													<th class="text-center"><b>中评次数</b></th>
													<td class="text-center">{{middleMark}}次</td>
												</tr>
												<tr>
													<th class="text-center"><b>差评次数</b></th>
													<td class="text-center">{{badMark}}次</td>
												</tr>


											</table>
										</div>
									</div>
									<div class="tab-pane fade" id="nav-vission" role="tabpanel"
										aria-labelledby="nav-contact-tab">
										<div class="single-content">

											<form action="" method="post" class="contact-form">
												<div class="row justify-content-center">
													<div class="col-lg-5">
														<input type="text" name="fname" placeholder="您的留言标题"
															class="common-input mt-10" required v-model="title">
													</div>
													<div class="col-lg-5">
														<input type="email" name="email" placeholder="您的邮箱"
															pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$"
															class="common-input mt-10" required v-model="mail">
													</div>
													<div class="col-lg-10">
														<textarea class="common-textarea mt-10" name="message"
															placeholder="您的留言内容" required v-model="content"></textarea>
													</div>
													<div class="col-lg-10 d-flex justify-content-end">
														<a
															class="primary-btn white-bg d-inline-flex align-items-center mt-20"
															@click="message(student.id)"> <span class="mr-10">留言</span><span
															class="lnr lnr-arrow-right"></span>
														</a> <br>
														<div class="alert-msg"></div>
													</div>
												</div>
											</form>
										</div>
									</div>

									<div class="tab-pane fade" id="nav-invite" role="tabpanel"
										aria-labelledby="nav-profile-tab" >
										<div class="single-content">

											<form class="contact-form">
												<div class="row justify-content-center">
													<div class="col-lg-5">
														<select class="nice-select mt-10"  id="styleId" equired>
															<option value="0">请选择您的流派</option>
															<option v-for="option in styles" v-bind:value="option.id" class="vfor-option">{{option.styleName}}</option>

														</select>

													</div>
													<div class="col-lg-5">
														<select class="nice-select mt-10" id="courseId" required>
															<option value="0">请选择您的课程</option>
															<option v-for="option in courses" v-bind:value="option.id">{{option.courseName}}</option>

														</select>
													</div>
													<div class="col-lg-5">
														<input type="text" name="email" placeholder="请选择开课时间"
															class="nice-select mt-10" required id="courseTime"
															>
													</div>

													<div class="col-lg-5">
														<select class="nice-select mt-10" name="hour"  id="courseHour" required>
															<option value="0">请选择课时</option>
															<option value="1">1小时</option>
															<option value="2">2小时</option>
															<option value="3">3小时</option>
															<option value="4">4小时</option>
															<option value="5">5小时</option>
															<option value="6">6小时</option>
														</select>
													</div>
													<div class="col-lg-10 d-flex justify-content-end">
														<a
															class="primary-btn white-bg d-inline-flex align-items-center mt-20"
															@click="order(student.id)"> <span class="mr-10">发起预约</span><span
															class="lnr lnr-arrow-right"></span>
														</a> <br>
														<div class="alert-msg"></div>
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-lg-1"></div>
					</div>
				</div>
			</div>
			<br> <br>
		</section>
	</div>
	<!-- Strat Footer Area -->
	<footer class="section-gap">
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-sm-6">
					<div class="single-footer-widget">
						<h4 class="text-white text-uppercase mb-20">关于我们</h4>
						<ul class="footer-nav">
							<li><a href="#">设备没买</a></li>
							<li><a href="#">场地未租</a></li>
							<li><a href="#">资金暂无</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6">
					<div class="single-footer-widget">
						<h4 class="text-white text-uppercase mb-20">网页链接</h4>
						<ul class="footer-nav">
							<li><a href="#">首页</a></li>
							<li><a href="#">我的学员</a></li>
							<li><a href="#">退出登录</a></li>

						</ul>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6">
					<div class="single-footer-widget">
						<h4 class="text-white text-uppercase mb-20">合作赞助</h4>
						<ul class="footer-nav">
							<li><a href="#">我们的邮箱</a></li>
							<li><a href="#">我们的QQ</a></li>
							<li><a href="#">我们的微信</a></li>
						</ul>
					</div>
				</div>

				<div class="col-lg-3 col-sm-6">
					<div class="single-footer-widget">
						<h4 class="text-white text-uppercase mb-20">友情赞助</h4>
						<ul class="instafeed d-flex flex-wrap">
							<li><img src="/img/i1.jpg" alt=""></li>
							<li><img src="/img/i2.jpg" alt=""></li>
							<li><img src="/img/i3.jpg" alt=""></li>
							<li><img src="/img/i4.jpg" alt=""></li>
						</ul>
					</div>
				</div>
			</div>
			<div
				class="footer-bottom d-flex justify-content-between align-items-center flex-wrap">
				<p class="footer-text m-0">
					版权所有 &copy; 2020.蜗牛学院68期Class No.2 Forward To Bald .<a
						target="_blank" href="http://sc.chinaz.com/moban/"></a>
				</p>
				<div class="footer-social d-flex align-items-center">
					<a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i
						class="fa fa-twitter"></i></a> <a href="#"><i
						class="fa fa-dribbble"></i></a> <a href="#"><i
						class="fa fa-behance"></i></a>
				</div>
			</div>
		</div>
	</footer>
	<!-- End Footer Area -->


</body>

<script type="text/javascript">
	let url =window.location.href;
	let id=url.split("?id=")[1];
	new Vue({
		el:"#all",
		data:{
			student:"",
			title:"",
			content:"",
			mail:"",
			styles:[],
			courses:[],
			focusStatus:"",
			role:"",
			successNum:0,
			failNum:0,
			goodMark:0,
			middleMark:0,
			badMark:0,
		/* 	selectStyleId:"0",			
			courseId:"0",	 	
			courseTime:"",
			courseHour:0*/	
		},
		mounted(){
			axios.get("/user/hasrole").then(
					res => {
						this.role = res.data;
						console.log(res.data);
					}),
			axios.post("/coach/getUser?id="+id)
				.then(
					res => {
						if(res.data.code==200){
							let student = res.data.data;		
							this.student = student;
						}else{
							layer.msg(res.data.msg);
						}
					}),
					axios.get("/focus/getFocusStatus?id="+id).then( res=> {
						this.focusStatus = res.data;
					}),
					axios.post("/coach/getCoachInfo?id="+id).then(
							res => {
								if(res.data.code==200){
								this.styles=res.data.data.styles;
								this.courses=res.data.data.courses;
								console.log(this.styles);
								setTimeout(function () { update(); }, 500);
								}
							});
			axios.get("/focus/getFocusStatus?id="+id).then( res=> {
				this.focusStatus = res.data;
			}),
			axios.get("/order/getDealInfo?id="+id).then( res=> {
				if(res.data.code==200){
					
				this.successNum=res.data.data.successNum;
				this.failNum=res.data.data.failNum;
				this.goodMark=res.data.data.goodMark;
				this.middleMark=res.data.data.middleMark;
				this.badMark=res.data.data.badMark;
				}else{
					layer.msg("系统维护中，请稍候");
				}
			
			})
		},
		methods:{
			order:function(id){
				console.info($("#styleId").val());
				if(this.courses.length==0){
					layer.alert("你还没有创建课程哦！快去开课吧！");
				}else if($("#styleId").val()=="0"||$("#courseTime").val()==""||$("#courseHour").val()=="0"||$("#courseId").val()=="0"){
					layer.msg("填好了吗？");
					
				}else{
				var params = new URLSearchParams();
			      params.append("userIdStudent", id);
			      params.append("courseId", $("#courseId").val());
			      params.append("styleId", $("#styleId").val());
			      params.append("courseTime", $("#courseTime").val());
			      params.append("courseHour", $("#courseHour").val());
			      params.append("courseName",$("#courseId").find("option:selected").text());
			      params.append("styleName",$("#styleId").find("option:selected").text());
			      axios({
			        url: "/coach/order",
			        method: "post",
			        data: params
			      }).then(res => {
			    	  if(res.data.code==200){
			    		  layer.msg(res.data.msg);
			    		  $("#courseId").val("0");
			    		  $("#styleId").val("0");
			    		  $("#courseTime").val("");
			    		  $("#courseHour").val("0");
			    		  $('select').niceSelect('update');
						}else{
							layer.msg(res.data.msg);
						}
			      });
				}
			},
			message:function(id){
				let message=this.title+"~"+this.content+"~"+this.mail;
				axios.post("/coach/message?id="+id+"&message="+message).then(res =>{				
						layer.msg(res.data.msg);		
						this.title="";
						this.mail="";
						this.content="";
				})
				
			},
			focus:function(){
				axios.get("/focus/addFocus?id="+id).then( res=> {
					if(res.data.code==1){
						layer.msg("关注成功!");
						this.focusStatus = "已关注";
					}else{

						lay.msg("系统繁忙，请稍后再试!")
					}
				})
			}
			
		}

	})

	layui.use('laydate', function(){
	var laydate = layui.laydate;
	 
	//执行一个laydate实例
	laydate.render({
	elem: '#courseTime' ,//指定元素
	type: 'datetime',
	trigger: 'click',

	});
	});
	
	/*  setTimeout(function () { update(); }, 1000); */
	
	function update(){
		$('select').niceSelect('update');
		}; 
	$("select").click(function(){
		$('select').niceSelect('update');
		});
</script>

</html>
